<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="layout :: common_header(~{::title},~{},~{::style})">
    <title>首页</title>
    <!-- accordion -->
    <style>
    .accordion{border:none}
    .accordion .accordion-header{padding:0 20px;height:44px;border-top:1px solid #fff;border-bottom:0;background:#2d3540}
    .accordion .accordion-header .panel-title{color:#fff;font-size:16px;font-weight:700;height:16px;line-height:40px}
    .accordion .accordion-header .panel-icon{left:30px;width:40px;height:40px}
    .accordion .accordion-header .panel-with-icon{padding-left:36px}
    .accordion .accordion-header .panel-icon.fa{color:#fff;text-shadow:1px 1px 1px #ccc;font-size:1.5em;margin-top:-10px}
    .accordion .accordion-header .panel-tool{display:none}
    .accordion .accordion-header-selected{border-top:3px solid #5cb85c;background:#2d3540}
    .accordion .accordion-header-selected .panel-title{color:#fff}
    .accordion ul{margin:0;padding:0;list-style-type:none}
    .accordion ul li{padding:0}
    .accordion ul li a{display:block;padding-left:50px;height:44px;line-height:44px;background:#465569;color:#fff;font-size:14px}
    .accordion ul li a:hover{color:#5cb85c;font-size: 14px;font-weight: 600;cursor:pointer;}
    .accordion ul li a.selected{border-left:3px solid #5cb85c;padding-left:60px;background:#1c3244;color:#5cb85c;font-size:14px;font-weight:600;cursor:default;}
    .ui-icon[class*=" icon-"]{background:none repeat scroll 0 0 transparent;text-indent:0;margin-top:-.5em}
    .ui-icon.icon-large{margin-top:-.75em}
    .ui-button-icon-only .ui-icon[class*=" icon-"]{margin-left:-7px}
    </style>
    <!-- topButton with message -->
    <style>
    .topLayout{height:43px;overflow: hidden;}
    .topLayout .top-bar{width:100%;height:43px;background-image:linear-gradient(to right , #2d3540, #555);}
    .topLayout .top-bar-left{position:absolute;width:auto!important;height:50px!important;background-image:none!important;left:10px;top:10px;display:block;}
    .topLayout .top-bar-left a{display:inline-block;position:relative;float:left}
    .topLayout .top-bar-left p{display:inline-block;text-align:center;line-height:20px;position:relative;font-size:18px;float:left;color:#fff;text-indent:20px}
    .topLayout .top-bar-right{float:right;width:auto!important;height:40px;text-align:right;color:#fff}
    .topLayout .top-bar-right a{display:inline-block;position:relative;float:left;cursor:default}
    .topLayout .top-bar-right a:hover{cursor:pointer;background:#e0e0e0;border-bottom:3px solid #5cb85c}
    .topLayout .top-bar-right a:hover .fa{color:#2d3540}
    .topLayout .top-bar-right a:hover p{color:#2d3540}
    .topLayout .top-bar-right a.selected{cursor:pointer;background:#fff;border-bottom:3px solid #5cb85c}
    .topLayout .top-bar-right a.selected .fa{color:#2d3540}
    .topLayout .top-bar-right a.selected p{color:#2d3540}
    .topLayout .top-bar-right p{display:inline-block;text-align:center;line-height:20px;position:relative;font-size:16px;float:left;color:#fff;text-indent:10px;margin:6px}
    .topLayout .top-bar-right .btn .fa{color:#fff;margin:10px 14px 0 0;width:24px;height:24px}
    .topLayout .top-bar-right .btn div{width:50px;height:40px}
    .message{position:absolute;right:0;top:0;box-shadow:0 0 5px 0 #999;background:#fff;z-index:9999;display:none;width:280px}
    .message .closeImg{position:absolute;top:0;right:0;width:16px;height:16px;background-color:#fff;color:#2d3540;padding:1px;margin:1px}
    .message input{width:180px;border:1px solid #2d3540}
    .message p{margin-top:8px;margin-bottom:6px;font-size:14px}
    .message a{text-decoration:none;border-radius:4px;background-color:#2d3540;color:#fff;font-size:14px;font-weight:700;padding:7px 0;text-align:center;margin:4px 0;}
    .message a:hover{cursor:pointer;background:#e0e0e0;color:#2d3540}
    .message table tr td.tdLeft{width:80px;text-align:right}
    .message table tr td span{margin:2px 0;}
    </style>
    <!-- Tabs -->
    <style>
    .tabs{border:0}
    .tabs-container .tabs-header{background:#fff;padding-left:8px;padding-bottom:3px}
    .tabs-container .tabs-scroller-left,.tabs-container .tabs-scroller-right{border:0;background-color:#fff}
    .tabs .tabs-title{padding-left:0;font-size:16px;color:#636b7d}
    .tabs .tabs-icon{display:none}
    .tabs li{margin:0}
    .tabs li a.tabs-inner{min-width:36px;border:0;background:#fff;border-radius:0;padding:0 20px}
    .tabs li.tabs-selected .tabs-title{color:#5a9cf9}
    .tabs li.tabs-selected{border-bottom:3px solid #5a9cf9}
    .subTab.tabs-container .tabs-header{background:#fff;padding-left:0}
    .subTab .tabs-title{padding-left:0;font-size:13px;color:#636b7d}
    .subTab li{margin:0;border:1px solid #ddd;border-left:none}
    .subTab li a.tabs-inner{min-width:36px;background:#fff;padding:0 40px}
    .subTab li.tabs-selected{border-top:2px solid #5a9cf9;background-color:#ddd;border-bottom:0}
    .subTab li.tabs-selected .tabs-title{color:#5a9cf9;position:relative}
    </style>
    <!-- notifyLayout -->
    <style>
    #notifyLayout .tabs-container .tabs-header{padding-left:34px}
    </style>
    <!-- messageLayout -->
    <style>
    #messageLayout .tabs-container .tabs-header{padding-left:68px}
    </style>
</head>
<body style="margin:0;">

<div class="easyui-layout" style="width:100%;height:100%;">
    <div class="topLayout" data-options="region:'north',border:false">
        <div id="topBar" class="top-bar">
            <div class="top-bar-left">
                <a href="javascript:void(0);">
                    <div class="logo_div">
                    </div>
                    <p th:text="${appName}">分布式多租户SAAS平台</p><p></p><p th:text="${tenantDisplayName}">测试租户</p>
                </a>
            </div>
            <div class="top-bar-right">
                <div style="float:left;">
                    <!--<a id="btnSetting" for="" href="javascript:void(0);" class="easyui-tooltip btn" title="系统设置">
                        <div>
                            <i class="fa fa-cog fa-2x" aria-hidden="true"></i>
                        </div>
                    </a>-->
                    <a id="btnNotify" for="notifyLayout" href="javascript:void(0);" class="easyui-tooltip btn " title="通知消息">
                        <div>
                            <i class="fa fa-bell fa-2x" aria-hidden="true"></i>
                        </div>
                    </a>
                    <a id="btnMessage" for="messageLayout" href="javascript:void(0);" class="easyui-tooltip btn " title="站内信">
                        <div>
                            <i class="fa fa-envelope fa-2x" aria-hidden="true"></i>
                        </div>
                    </a>
                </div>
                <div style="float:left;">
                    <a for="userLayout" class="btn" style="width:120px;height:43px;">
                        <p>
                        	[[${userName}]]
                            <i class="fa fa-user fa-2x" style="margin:0px;" aria-hidden="true"></i>
                        </p>
                    </a>

                </div>
            </div>
        </div>

    </div>
    <div id="leftMenuLayout" title="" data-options="region:'west', border:false, split: false" style="width:200px;background: #2d3540;padding-bottom: 30px">
        <div id="leftMenu">
        </div>
    </div>
    <div id="mainLayout" data-options="region:'center',border:false">
        <div id="mainTabs" class="easyui-tabs" data-options="iconCls:'icon-home', fit:true,border:false,collapsible:false,closable:false,refreshable:false">
            <div title="主页" data-options="refreshable:false">
                <div class="homeLayout" data-options="fit: true">
                    <div id="divErrorMsg"></div>
                    <br />
                    <div id="divMenusData"></div>
                </div>
            </div>
        </div>

        <div id="userLayout" class="message" style="height:100%;">
            <a id="btnClose" class="closeImg">
                <div>
                    <i class="fa fa-times fa-1x" aria-hidden="true"></i>
                </div>
            </a>
            <div style="margin-top:16px;">
                <div style="float:left;margin:12px;">
                    <i class="fa fa-user-circle fa-5x" aria-hidden="true"></i>
                </div>
                <div>
                    <div>
                        <p style="font-size:16px;font-weight:bold;"><p th:text="${userDisplayName}">系统管理员</p></p>
                        <a id="btnSignOut" class="btn" href="javascript:void(0);" style="position:absolute;top: 68px;right: 28px;width:60px;">
                            <div>
                                <i class="fa fa-sign-out fa-1x" aria-hidden="true"></i>
                                <span style="font-size: 12px;font-weight:bold;">退出</span>
                            </div>
                        </a>
                    </div>
                    <p th:text="${userEmail}">tianchangjun@outlook.com</p>
					<p th:text="${userPhone}">13611111111</p>
                </div>
            </div>
            <div class="easyui-accordion" style="width:280px;">
                <div title="修改密码" data-options="split:true,border:false,collapsible:true,iconCls:'fa fa-key'" style="overflow:auto;padding:10px;border:none;">
                    <form id="formChangePwd" method="post" enctype="multipart/form-data">
                        <table>
                            <tr>
                                <td class="tdLeft">当前密码:</td>
                                <td><input name="OldPassword" type="password" class="easyui-validatebox easyui-textbox" data-options="plain:true, required:true, missingMessage:'必填项'"/></td>
                            </tr>
                            <tr>
                                <td class="tdLeft">  新密码:</td>
                                <td><input name="NewPassword" type="password" class="easyui-validatebox easyui-textbox" data-options="plain:true, required:true, missingMessage:'必填项'"/></td>
                            </tr>
                            <tr>
                                <td class="tdLeft">确认密码:</td>
                                <td><input name="ConfirmPassword" type="password" class="easyui-validatebox easyui-textbox" data-options="plain:true, required:true, missingMessage:'必填项'"/></td>
                            </tr>
                        </table>
                    </form>
                    <div style="text-align:center;">
                        <a href="javascript:void(0);" class="fa fa-check-square-o fa-1x" style="width:70px;" onclick="submitPasswordForm()"><span>确认</span></a>
                        <a href="javascript:void(0);" class="fa fa-eraser fa-1x" style="width:70px;" onclick="clearPasswordForm()">取消</a>
                    </div>

                </div>
                <div title="修改邮箱/手机" data-options="split:true,border:false,collapsible:true,iconCls:'fa fa-address-book'" style="overflow:auto;padding:10px;border:none;">
                    <form id="formMailPhone" method="post" enctype="multipart/form-data">
                        <table>
                            <tr>
                                <td class="tdLeft">邮箱:</td>
                                <td><input name="Email" class="easyui-validatebox easyui-textbox" data-options="required:true, missingMessage:'必填项'" value="admin@kcloudy.com" th:value="${userEmail}"/></td>
                            </tr>
                            <tr>
                                <td class="tdLeft">手机:</td>
                                <td><input name="Phone" class="easyui-validatebox easyui-textbox" data-options="required:true, missingMessage:'必填项'" value="13600000000" th:value="${userPhone}"/></td>
                            </tr>
                        </table>
                    </form>
                    <div style="text-align:center;">
                        <a href="javascript:void(0);" style="width:70px;" class="fa fa-check-square-o fa-1x" onclick="submitMailPhoneForm()">确认</a>
                        <a href="javascript:void(0);" style="width:70px;" class="fa fa-eraser fa-1x" onclick="clearMailPhoneForm()">清除</a>
                    </div>
                </div>
                <div title="" selected></div>
            </div>
        </div>

        <div id="notifyLayout" class="message" style="height:100%; width:386px;">
            <a class="closeImg">
                <div>
                    <i class="fa fa-times fa-1x" aria-hidden="true"></i>
                </div>
            </a>
            <div style="margin-top:14px;" class="easyui-tabs" data-options="iconCls:'icon-home', fit:true,border:false,collapsible:false,closable:false,refreshable:false">
                <div class="content companyNote" data-options="title:'公司通告', refreshable:false" style="padding:10px">
                    <p style="font-size:14px">jQuery EasyUI framework helps you build your web pages easily.</p>
                    <ul>
                        <li>easyui is a collection of user-interface plugin based on jQuery.</li>
                        <li>easyui provides essential functionality for building modem, interactive, javascript applications.</li>
                        <li>using easyui you don't need to write many javascript code, you usually defines user-interface by writing some HTML markup.</li>
                        <li>complete framework for HTML5 web page.</li>
                        <li>easyui save your time and scales while developing your products.</li>
                        <li>easyui is very easy but powerful.</li>
                    </ul>
                </div>
                <div class="content systemNote" data-options="title:'系统更新', refreshable:false" style="padding:10px;">
                    <p style="font-size:14px">jQuery EasyUI framework helps you build your web pages easily.</p>
                    <ul>
                        <li>easyui is a collection of user-interface plugin based on jQuery.</li>
                        <li>easyui provides essential functionality for building modem, interactive, javascript applications.</li>

                    </ul>
                </div>
                <div class="content advertiseNote" data-options="title:'推广广告', refreshable:false" style="padding:10px;">
                    <p style="font-size:14px">jQuery EasyUI framework helps you build your web pages easily.</p>
                    <ul>
                        <li>easyui is a collection of user-interface plugin based on jQuery.</li>
                        <li>easyui provides essential functionality for building modem, interactive, javascript applications.</li>

                    </ul>
                </div>
            </div>
        </div>

        <div id="messageLayout" class="message" style="height:100%; width:386px;">
            <a class="closeImg">
                <div>
                    <i class="fa fa-times fa-1x" aria-hidden="true"></i>
                </div>
            </a>
            <div style="margin-top:16px;" class="easyui-tabs" data-options="iconCls:'icon-home', fit:true,border:false,collapsible:false,closable:false,refreshable:false">
                <div class="content unread" data-options="title:'未读消息', refreshable:false" style="padding:10px">
                    <p style="font-size:14px">jQuery EasyUI framework helps you build your web pages easily.</p>
                    <ul>
                        <li>easyui is a collection of user-interface plugin based on jQuery.</li>
                        <li>easyui provides essential functionality for building modem, interactive, javascript applications.</li>
                        <li>using easyui you don't need to write many javascript code, you usually defines user-interface by writing some HTML markup.</li>
                        <li>complete framework for HTML5 web page.</li>
                        <li>easyui save your time and scales while developing your products.</li>
                        <li>easyui is very easy but powerful.</li>
                    </ul>
                </div>
                <div class="content read" data-options="title:'已读消息', refreshable:false" style="padding:10px;">
                    <p style="font-size:14px">jQuery EasyUI framework helps you build your web pages easily.</p>
                    <ul>
                        <li>easyui is a collection of user-interface plugin based on jQuery.</li>
                        <li>easyui provides essential functionality for building modem, interactive, javascript applications.</li>

                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

<th:block th:replace="layout :: scripts"/>

<!--Menu & topButton & Tabs-->
<script type="text/javascript" th:inline="javascript">
    const prx_iframe = "tab_frm_";
    const prx_subIframe = "subTab_frm_";
    const prx_subTabParentId = "#subTabs-";
    const topButton = "#topBar";
    const mainTabs = "#mainTabs";
    const leftMenu = "#leftMenu";
    const loadMenusUrl = "/Home/LoadMenus";
    function TreeNodeVM() {
        var me = this;

        me.parentId = null;
        me.id = 0;
        me.text = '';
        me.url = '';
        me.leaf = false;
        me.level = 0;
        me.treeCode = '';
        me.applicationId = '';
        me.checked = false;
        me.isExtPage = false;
        me.smallIcon = '';
        me.children = [];
    }

    function MainPageVM() {
        var me = this;

        me.initTabs = function () {
            $(mainTabs).tabs({
                tabHeight: 36,
                onSelect: function (title, index)
                {
                    updateHash(index);
                }
            });
        };

        me.initTopButton = function () {
            let $topButton = $(topButton);
            let $buttons = $('.top-bar-right a', $topButton);
            $.each($buttons, function (i, btn) {
                $(btn).click(function () {
                    let $button = $(this);
                    if ($button.hasClass("selected")) {
                        $('.top-bar-right a', $topButton).removeClass("selected");

                        let layoutId = $button.attr('for');
                        $("#" + layoutId).hide();
                        return;
                    }

                    //所有按钮不被选中后，选中触发事件的按钮
                    $('.top-bar-right a', $topButton).removeClass("selected");
                    $button.addClass("selected");
                    //隐藏所有的右侧消息栏
                    let $messages = $('.message');
                    $.each($messages, function (j, layout) {
                        $(layout).hide();
                    });
                    //显示按钮所需显示的消息栏，根据按钮属性（for）所指明的消息栏
                    let layoutId = $button.attr('for');
                    $("#" + layoutId).fadeIn();
                });
            });

            let $closeButtons = $('.message .closeImg');
            $.each($closeButtons, function (i, btn) {
                $(btn).click(function () {
                    let $button = $(this);

                    $button.parent().fadeOut();
                    $('.top-bar-right a', $topButton).removeClass("selected");
                });
            });
        };

        me.menuData;
        me.initMenus = function() {
            $.ajax({
                async: true,
                type: "get",
                dataType: "json",
                url: loadMenusUrl,
                success: function (data) {
                    //console.log(data);
                    if (me.menuData == undefined || me.menuData == null)
                        me.menuData = data;

                    loadMenu(me.menuData);
                    loadHash(window.location.hash);
                },
                complete: function () {

                }
            });
        };
        //  初始化应用程序主界面左侧面板中“导航菜单”的数据，并加载特定的子菜单树数据。
        let loadMenu = function (menus) {
            let $leftMenu = $(leftMenu).empty();
            let menulist = "";
            $.each(menus, function (i, n) {
                menulist += '<div title="' + n.text + '" data-options="split:true,border:false,collapsible:true, iconCls:\'' + n.smallIcon + '\'">';
                menulist += '<ul>';
                $.each(n.children, function (j, o) {
                    let url = '';
                    if (!location.origin) {
                        location.origin = window.location.protocol + "//" + window.location.hostname + (window.location.port ? ':' + window.location.port : '');
                    }
                    menulist += '<li id="menu_' + o.id + '"  iconCls:\'' + o.smallIcon + '\'' + (o.IsActive ? 'class="selected"' : '') + '><div class:"' + o.smallIcon + '"><a id="linkmenu_' + o.id + '" target="mainFrame" menuId="' + o.id + '" ref="' + o.url + '"  class:"' + o.smallIcon + '">' + o.text + '</a></div></li> ';
                });
                menulist += '</ul></div>';
            });

            $leftMenu.append(menulist);

            $('li a', $leftMenu).click(function () {
                //隐藏所有的右侧消息栏
                let $messages = $('.message');
                $.each($messages, function (j, layout) {
                    $(layout).hide();
                });
                //所有按钮不被使用
                let $topButton = $(topButton);
                $('.top-bar-right a', $topButton).removeClass("selected");

                let $this = $(this);
                let id = $this.attr("menuId");;
                me.openTab(id);
                $('li a', $leftMenu).removeClass("selected");
                $this.addClass("selected");

            }).hover(function () {
                $(this).addClass("hover");
            }, function () {
                $(this).removeClass("hover");
            });

            $leftMenu.accordion({
                border: false,
                fit: false,
                collapsed: true,
                onSelect: function (title, index) {
                    //将所有的父菜单（Accordion）设为非选中状态
                    $('.panel.panel-htop', $leftMenu).removeClass('selected');
                    //将所选中的父菜单（Accordion）设为选中状态
                    $leftMenu.accordion('getSelected').parent().addClass("selected");
                }
            });
            $('.panel-tool', $leftMenu).remove();
            $('li.selected a', $leftMenu).trigger('click');

            let $panels = $leftMenu.accordion('panels');
            $.each($panels, function (i, n) {
                if ($('li.selected', n).length) {
                    $leftMenu.accordion('select', i);
                    return;
                }
            });
        };
        // 根据浏览器的hash值，选中所需选中的父菜单（Accordion）及其下的子菜单（li a）
        let loadHash = function (hash) {
            while (hash.left(1) === "#") {
                hash = hash.substr(1);
            }
            if (hash.isNullOrWhiteSpace()) {
                return;
            }

            let refresh = false;
            let queryString = "";
            if (hash.indexOf("?") > 0) {
                queryString = hash.split("?")[1];
                hash = hash.split("?")[0];
                refresh = true;
            }

            let iHash = tryParseInt(hash, 0);
            if (hash === "") {
                me.openTab(0);
                return;
            }

            me.openTab(iHash, queryString, refresh);
            selectMenuById(iHash);
        };
        // 根据选中Tab页面的索引值（index），设置浏览器的hash值（menu.Id?queryParams, 如：10?id=5），并选中的所对应父菜单（Accordion）及其下的子菜单（li a）
        let updateHash = function (index) {
            let opts = $(mainTabs).tabs("getTab", index).panel("options");
            let frmId = opts.id;
            if (frmId === undefined || frmId == null) {
                window.location.hash = "#";
                $('li a', leftMenu).removeClass("selected");
                return;
            }

            let menuId = frmId.replace(prx_iframe, '');

            let queryString = "";
            //let hash = opts.href ? opts.href : "";
            let ifr = $('#' + frmId + ' iframe');
            let hash = ifr[0] != null && ifr[0].src ? ifr[0].src : "";
            if (hash.indexOf("?") > 0) {
                queryString = hash.split("?")[1];
                hash = hash.split("?")[0];
            }

            if (queryString != undefined && queryString != null && queryString != "") {
                hash = menuId ? (menuId + "?" + queryString) : "";
            } else {
                hash = menuId ? menuId : "";
            }

            window.location.hash = hash;

            //将父菜单（Accordion）面板及其下的所有子菜单（li a）设为非选中状态---删除class中的selected
            $(leftMenu).find('.panel.selected').removeClass('selected');
            $('li a', $(leftMenu)).removeClass("selected");
            //设置选中的父菜单（Accordion）及其下的子菜单（li a）
            selectMenuById(menuId);
        };
        // 根据菜单Id，设置选中的父菜单（Accordion）及其下的子菜单（li a）
        let selectMenuById = function (menuId) {
            $('.panel-htop', $(leftMenu)).removeClass('selected');
            $('.accordion-header', $(leftMenu)).removeClass('accordion-header-selected');
            $.each(me.menuData, function (i, menus) {
                menus.checked = false;
                $.each(menus.children, function (j, menu) {
                    menu.checked = false;
                });
            });

            let iMenuId = tryParseInt(menuId, 0);
            for (let i = 0, len = me.menuData.length; i < len; i++) {
                if (me.menuData[i].children.length) {
                    for (let j = 0; j < me.menuData[i].children.length; j++) {
                        if (me.menuData[i].children[j].id === iMenuId) {
                            me.menuData[i].checked = true;
                            me.menuData[i].children[j].checked = true;
                            //触发父菜单（Accordion）的OnSelect事件
                            $(leftMenu).accordion('select', i);
                            //设置父菜单（Accordion）为选中状态---设置class为selected
                            $('.panel.panel-htop', $(leftMenu)).eq(i).addClass('selected');
                            $('.panel.panel-htop .accordion-header', $(leftMenu)).eq(i).addClass('accordion-header-selected');
                            //设置父菜单（Accordion）下的子菜单（li a）为选中状态---设置class为selected
                            $('li a', $(leftMenu).find('.panel.selected')).eq(j).addClass('selected');
                            return;
                        }
                    }
                }
            }
        };
        // 根据菜单Id，获取菜单iframe对象
        //  id：菜单Id(menuData.id)---5
        //  isReturnParentMenu：是否返回菜单父节点---true
        let getMenuById = function (id, isReturnParentMenu) {
            if (isReturnParentMenu === undefined || isReturnParentMenu == null)
                isReturnParentMenu = false;
            id = tryParseInt(id, 0);
            for (let i = 0; i < me.menuData.length; i++) {
                let menu = me.menuData[i];
                if (menu.id === id) {
                    return menu;
                } else {
                    let children = menu.children;
                    for (let j = 0; j < children.length; j++) {
                        let cmenu = children[j];
                        if (cmenu.id === id) {
                            return cmenu;
                        } else {
                            let cChildren = cmenu.children;
                            for (let k = 0; k < cChildren.length; k++) {
                                let ccmenu = cChildren[k];
                                if (ccmenu.id === id) {
                                    if (isReturnParentMenu) {
                                        return cmenu;
                                    }
                                    return ccmenu;
                                }
                            }
                        }
                    }
                }
            }

            return null;
        };
        let tryParseInt = function (str, defaultValue) {
            if (Number.isInteger(str))
                return str;

            let retValue = defaultValue;
            if (str !== null) {
                if (str.length > 0) {
                    if (!isNaN(str)) {
                        retValue = parseInt(str);
                    }
                }
            }
            return retValue;
        };

        // 根据菜单Id，添加一个新的选项卡(Tab页面)；
        //  id：菜单Id(menu.id)---5
        //  queryParams：查询条件---'id=5'
        //  refresh：是否刷新页面---true
        me.openTab = function (id, queryParams, refresh) {
            let menu = getMenuById(id);
            if (menu === undefined || menu == null)
                return;

            let exists = isExists(prx_iframe + id);
            if (exists) {
                jumpTab(menu, queryParams, refresh, false);
            } else {
                createTab(menu, queryParams, false);
            }
        };
        // 根据菜单Id，在主选项卡中添加一个新的子选项卡(当前Tab页面添加一个子Tab页面)；
        //  id：菜单Id(menu.id)---5
        //  queryParams：查询条件---'id=5'
        //  refresh：是否刷新页面---true
        me.openSubTab = function (id, queryParams, refresh) {
            let menu = getMenuById(id);
            if (menu === undefined || menu == null)
                return;

            let exists = isExists(prx_subIframe + id, prx_subTabParentId + menu.parentId);
            if (exists) {
                jumpTab(menu, queryParams, refresh, true);
            } else {
                createTab(menu, queryParams, true);
            }
        };
        // 根据菜单Id，关闭一个选项卡(Tab页面)；
        //  id：菜单Id(menuData.id)---5
        me.closeTab = function (id) {
            let menu = getMenuById(id, false);
            if (menu === undefined || menu == null)
                return;

            let index = $(mainTabs).tabs('getTabIndex', $('#' + prx_iframe + id));  // get tab index
            $(mainTabs).tabs("close", index);
            //$(mainTabs).tabs("close", menu.text);
        };
        // 根据菜单Id，关闭一个选项卡中的子选项卡(Tab页面中的子Tab页)；
        //  id：菜单Id(menuData.id)---5
        me.closeSubTab = function (id) {
            let menu = getMenuById(id, false);
            if (menu === undefined || menu == null)
                return;

            let parentTabId = prx_subTabParentId + menu.parentId;
            let index = $(parentTabId).tabs('getTabIndex', $('#' + prx_subIframe + id));  // get tab index
            $(parentTabId).tabs("close", index);
            //$(parentTabId).tabs("close", menu.text);
        };

        let createTab = function (menu, queryParams, isOpenSubTab) {
            let id = menu.id;
            let title = menu.text;
            let parentId = menu.parentId;

            let menus = menu.children;
            if (isOpenSubTab && isSubTab(menu)) {
                let subId = menu.id;
                let subTitle = menu.text;
                let subHref = getHrefByUrlwithParams(menu.url, queryParams);
                let subTab = '<div id="' + prx_iframe + subId + '" title="' + subTitle + '" data-options="refreshable: false, iniframe: true, selected: false, delayLoadIframe:\'' + subHref + '\'"></div>';

                $(prx_subTabParentId + parentId).append(subTab);

                let subTabOption = {
                    id: prx_subIframe + subId,
                    title: subTitle,
                    delayLoadIframe: subHref,
                    iniframe: true,
                    closable: true,
                    refreshable: false,
                    iconCls: "fa fa-list-alt",
                    repeatable: false,
                    selected: false
                }
                $(prx_subTabParentId + parentId).tabs("add", subTabOption);
                let index = $(prx_subTabParentId + parentId).tabs('getTabIndex', $('#' + prx_subIframe + subId));
                $(prx_subTabParentId + parentId).tabs("select", index);
            } else if (menus.length === 0) {
                let href = getHrefByUrlwithParams(menu.url, queryParams);
                let tabOption = {
                    id: prx_iframe + id,
                    title: title,
                    href: href,
                    iniframe: true,
                    closable: true,
                    refreshable: false,
                    iconCls: "fa fa-list-alt",
                    repeatable: false,
                    selected: true
                };

                $(mainTabs).tabs("add", tabOption);
            } else {
                let tabOption = {
                    id: prx_iframe + id,
                    title: title,
                    content: "<div id='subTabs-" + id + "' class='easyui-tabs subTab' data-options='fit: true'></div>",
                    iniframe: false,
                    closable: true,
                    refreshable: false,
                    iconCls: "fa fa-list-alt",
                    repeatable: false,
                    selected: true
                };
                $(mainTabs).tabs("add", tabOption);

                //设置子Tab页面
                $.each(menus, function (i, n) {
                    //扩展页面不显示，需要通过单击打开新页面的方式访问
                    if (!n.isExtPage) {
                        let subId = n.id;
                        let subTitle = n.text;
                        let subHref = n.url;

                        let subTab = '<div id="' + prx_iframe + subId + '" title="' + subTitle + '" data-options="refreshable: false, iniframe: true, selected: false, delayLoadIframe:\'' + subHref + '\'"></div>';

                        $("#subTabs-" + id).append(subTab);

                        let subTabOption = {
                            id: prx_subIframe + subId,
                            title: subTitle,
                            delayLoadIframe: subHref,
                            iniframe: true,
                            closable: false,
                            refreshable: false,
                            iconCls: "fa fa-list-alt",
                            repeatable: false,
                            selected: false
                        }
                        $("#subTabs-" + id).tabs("add", subTabOption);
                    }
                });

                $(prx_subTabParentId + id).tabs({
                    onSelect: function (header, index) {
                        $("#subTabs-" + id).tabs('updateIniframe', index);
                    }
                }).tabs('unselect', 0);
                $(prx_subTabParentId + id).tabs('select', 0);
            }
        };
        let jumpTab = function (menu, queryParams, refresh, isOpenSubTab) {
            if (menu === undefined || menu == null) {
                $(mainTabs).tabs("select", id);
                return;
            }

            let id = menu.id;
            let href = getHrefByUrlwithParams(menu.url, queryParams);
            if (refresh === undefined || refresh == null)
                refresh = false;

            if (isOpenSubTab && isSubTab(menu)) {
                let ifr = $('#' + prx_subIframe + id + ' iframe');
                if (ifr != undefined && href !== undefined && href !== null && href !== "") {
                    if (refresh) {
                        ifr[0].src = href;
                    }
                }

                let parentId = menu.parentId;
                let index = $("#subTabs-" + parentId).tabs('getTabIndex', $('#' + prx_subIframe + id));
                $("#subTabs-" + parentId).tabs("select", index);
            } else {
                let ifr = $('#' + prx_iframe + id + ' iframe');
                if (ifr != undefined && href !== undefined && href !== null && href !== "") {
                    if (refresh) {
                        ifr[0].src = href;
                    }
                }

                let index = $(mainTabs).tabs('getTabIndex', $('#' + prx_iframe + id));  // get tab index
                $(mainTabs).tabs("select", index);
            }
        };
        // 判断指定的选项卡是否存在于当前主页面的选项卡组(Tabs)中；
        let isExists = function (id, parentTabId) {
            let tabs = $(mainTabs).tabs("tabs");
            if (parentTabId != undefined && parentTabId != null && parentTabId != "") {
                tabs = $(parentTabId).tabs("tabs");
            }
            let options = $.array.map(tabs, function (val) { return val.panel("options"); });

            let idIsExist = $.array.some(options, function (val) {
                if (val.id == null || id == null) {
                    return val.id == null && id == null;
                }
                return $.trim(val.id.toLowerCase()) === $.trim(id.toLowerCase())
                    || $.trim(val.id.toLowerCase()) === (encodeURI($.trim(id))).toLowerCase();
            });

            return idIsExist;
        };
        let getHrefByUrlwithParams = function (url, queryParams) {
            let href = url;
            if (queryParams != undefined && queryParams != null && queryParams != '') {
                if (href.indexOf("?") > 0) {
                    href = href + "&" + queryParams
                } else {
                    href = href + "?" + queryParams
                }
            }

            return href;
        }
        let isSubTab = function(menu)
        {
            let parentId = menu.parentId;
            let level = menu.level;
            return level === 3 && (parentId != undefined || parentId != null && parentId != '');
        }
    }
</script>
<!--userLayout Change Password-->
<script type="text/javascript" th:inline="javascript">
    const savePasswordFormUrl = '/Account/ChangePassword';
    function submitPasswordForm() {
        let validate = $('#formChangePwd').form("enableValidation").form("validate");
        if (validate) {
            $.easyui.loading({ msg: '正在保存数据，请稍等...' });
            let formData = $('#formChangePwd').form("getData");
            $.ajax({
                async: true,
                type: "post",
                dataType: "json",
                url: savePasswordFormUrl,
                data: AddAntiForgeryToken(formData),
                success: function (data) {
                    if (data.success) {
                        if (data.result) {
                            $.messager.showInfoTopCenter('系统提示', '保存成功', 1000);
                        } else {
                            $.messager.showErrorTopCenter('错误消息', '保存失败', 1000);
                        }
                    } else {
                        $.messager.showErrorTopCenter('错误消息', data.message, 1000);
                    }
                },
                complete: function () {
                    $.easyui.loaded();
                }
            })
        }
    }
    function clearPasswordForm() {
        $('#formChangePwd').form('clear');
    }
</script>
<!--userLayout Change Mail & Phone-->
<script type="text/javascript" th:inline="javascript">
    const saveMailPhoneFormUrl = '/Account/ChangeMailPhone';
    function submitMailPhoneForm() {
        let validate = $('#formMailPhone').form("enableValidation").form("validate");
        if (validate) {
            $.easyui.loading({ msg: '正在保存数据，请稍等...' });
            let formData = $('#formMailPhone').form("getData");
            $.ajax({
                async: true,
                type: "post",
                dataType: "json",
                url: saveMailPhoneFormUrl,
                data: AddAntiForgeryToken(formData),
                success: function (data) {
                    if (data.success) {
                        if (data.Result) {
                            $.messager.showInfoTopCenter('系统提示', '保存成功', 1000);
                        } else {
                            $.messager.showErrorTopCenter('错误消息', '保存失败', 1000);
                        }
                    } else {
                        $.messager.showErrorTopCenter('错误消息', data.message, 1000);
                    }
                },
                complete: function () {
                    $.easyui.loaded();
                }
            })
        }
    }
    function clearMailPhoneForm() {
        $('#formMailPhone').form('clear');
    }
</script>
<!--notifyLayout Message-->
<script type="text/javascript" th:inline="javascript">
    const getMessagesData = '/Home/LoadMessages';
    function getMessages() {
        $.ajax({
            async: true,
            type: "get",
            dataType: "json",
            url: getMessagesData,
            success: function (data) {
                let $notify = $('notifyLayout').empty();
                let unReadContent = "";
                let readContent = "";

                let content = '<div title="" data-options="split:true,border:false,collapsible:true, ">';
                content += '<ul>';
                $.each(data, function (i, msg) {
                    content += '<li id="msg_' + msg.id + '"' + (msg.status = 0 ? ' class="unreadmsg"' : 'class="readmsg"') + '><div class:"' + (msg.Status = 0 ? ' class="unreadmsg"' : 'class="readmsg"') + + '"><a id="linkmsg_' + msg.id + '" ref="" >' + msg.MemberRemindMessage + '</a></div></li> ';

                    if (msg.status === 0) {
                        unReadContent += content;
                    } else {
                        readContent += content;
                    }
                });

                unReadContent += "</ul></div>";
                readContent += "</ul></div>";

                //console.log(unReadContent);
                //console.log(readContent);

                $('.content.unread', $notify).append(unReadContent);
                $('.content.read', $notify).append(readContent);
            },
            complete: function () {

            }
        });
    }
</script>
<!--Main-->
<script type="text/javascript" th:inline="javascript">
    let mainpageVM;
    const signOutUrl = "/Account/SignOut";
    $(function () {
        if (mainpageVM == null || mainpageVM == undefined)
            mainpageVM = new MainPageVM();

        mainpageVM.initTopButton();
        mainpageVM.initTabs();
        mainpageVM.initMenus();

        getMessages();

        $("#btnSignOut").click(function () {
            $.easyui.messager.confirm("您确定要退出当前程序并关闭该网页？", function (c) {
                if (c) {
                    window.location = signOutUrl;
                }
            });
        });
    });

    // 接受Tab中Iframe传递的参数，并做出相应的操作
    //  showLoadingMessage、showInfoMessage、showErrorMessage
    //  openPage、closePage、openSubPage、closeSubPage、closeCurrentPage、refreshPage、getPage
    window.addEventListener('message', function (e) {
        if (e.data) {
            $('#divMenusData').append(e.data);
            let rdata = eval('(' + e.data + ')');
            //console.log(rdata);

            let command = rdata.command;
            let data = rdata.data;
            if (command === 'showLoadingMessage') {
                let message = data.message;
                if (message != undefined && message != null && message != '') {
                    $.easyui.loading({ msg: message });
                } else {
                    $.easyui.loading({ msg: '加载中，请稍后...' });
                }
            } else if (command === 'showInfoMessage') {
                let code = data.code;
                let message = data.message;
                if (message != undefined && message != null && message != '') {
                    $.messager.showInfoTopCenter('系统提示', message, 1000);
                }
            } else if (command === 'showErrorMessage') {
                let code = data.code;
                let message = data.message;
                if (message != undefined && message != null && message != '') {
                    $.messager.showErrorTopCenter('错误消息', message, 1000);
                }
            } else if (command === 'openPage') {
                let key = data.page_id;
                let queryParams = data.parame;
                let refresh = data.refresh;
                //this.console.log('index.html----openPage：' + key);

                mainpageVM.openTab(key, queryParams, refresh);
            } else if (command === 'openSubPage') {
                let key = data.page_id;
                let queryParams = data.parame;
                let refresh = data.refresh;
                //this.console.log('index.html----openPage：' + key);

                mainpageVM.openSubTab(key, queryParams, refresh);
            } else if (command === 'closePage') {
                let key = data.page_id;
                //this.console.log('index.html----closePage：' + key);

                mainpageVM.closeTab(key);
            } else if (command === 'closeSubPage') {
                let key = data.page_id;
                //this.console.log('index.html----closeSubPage：' + key);

                mainpageVM.closeSubTab(key);
            } else if (command === 'closeCurrentSubPage') {
                mainpageVM.closeCurrentTab();
            } else if (command === 'closeCurrentPage') {
                mainpageVM.closeCurrentTab();
            } else if (command === 'refreshPage') {
                let key = data.page_id;
                //this.console.log('index.html----refreshPage：' + key);

                let ifr = $('#' + prx_iframe + key + ' iframe');
                ifr[0].src = ifr[0].src;
            } else if (command === 'getPage') {
                let key = data.page_id;
                //this.console.log('index.html----getPage：' + key);

                let curTab = $(mainpageVM.mainTabs).tabs('getSelected');
                if (curTab && curTab.find('iframe').length > 0) {
                    let curTabWin = curTab.find('iframe')[0].contentWindow;
                    curTabWin.postMessage('{"command": "getPage", "returnKey" :"' + returnKey + '", "data": {"id": "' + prx_iframe + key + '"}}', '*');
                }
            }
        }
    }, false);

</script>
</body>
</html>

